<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级联动</title>
		<style>
			p{display: inline-block;}
		</style>
	</head>
	<body>
		<div>
		<p>所在地区：</p>
		<!--放省、直辖市-->
		<select>
			<option>请选择省/城市</option>
		</select>
		<!--放省会-->
		<select>
			<option>请选择城市/地区</option>
		</select>
		<script>
		 //1.创建两个数组,分别存放省和省会城市
			var city = ["北京市","山东省","湖北省","湖南省","广东省"];
			var shi = ["朝阳区","济南","武汉","长沙","广州"];
         //2.获取列表节点
         var oSelect = document.getElementsByTagName("select");
         console.log(oSelect);//检测节点是否被获取
         //3.将city数组中的省动态添加到oSelect中
         window.onload = function(){
         	var ht1 = "<option>请选择省/城市</option>"
         	//用for循环将city数组中的省动态添加到oSelcet[0]中
         	for(var i=0;i<city.length;i++){
         		ht1 = ht1 + "<option>"+city[i]+"</option>";
         		//将加载好的列表项放到select列表中
         		//oSelect[0].innerHTML = ht1;
         	}
         	//将加载好的列表项放到select列表中     （里面和外面都可以放 区别就是影响性能）
            oSelect[0].innerHTML = ht1;
         }
         oSelect[0].onchange = function(){
         	//创建变量j存放省在city数组中的索引
         	var j = city.indexOf(this.value);
         	//将省会数组hui里索引和city数组中索引相同的元素放到oSelect[1]中
         	ht2 = "<option>"+shi[j]+"</option>";
         	//将列表项的内容放到列表中，如果是“请选择省、城市”单独处理
         	if(oSelect[0].value == "请选择省/城市"){
         		oSelect[1].innerHTML = "<option>请选择城市/地区</option>";
         	}else{
         		oSelect[1].innerHTML = ht2;
         	}
         	
         }
		</script>
		</div>
	</body>
</html>
